import React, {Component} from 'react';
import {View, Text, ImageBackground, StyleSheet, ScrollView, Image, Dimensions} from 'react-native';

import Header from "../../components/header"
import {pxToDp} from "../../utils/styleKits";
import ThButton from "../../components/THButton";

class TestResult extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Header title={'测试结果'}/>
        <ImageBackground source={require('../../images/result.png')} style={styles.bg}>

          <Text style={{
            color: '#fff', position: 'absolute',
            left: pxToDp(20), top: pxToDp(10), letterSpacing: pxToDp(5)
          }}>灵魂基因鉴定单</Text>

          <View style={styles.scrollTextBox}>
            <View style={styles.nameBox}>
              <Text style={{color: '#fff'}}>[</Text>
              <Text style={{color: '#fff'}}>一叶知秋</Text>
              <Text style={{color: '#fff'}}>]</Text>
            </View>
            <ScrollView>
              <Text style={{color: '#fff'}}>陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
                蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
                昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
                金满箱，银满箱，转眼乞丐人皆谤。
                正叹他人命不长，那知自己归来丧！
                训有方，保不定日后作强梁。择膏粱，谁承望流落在烟花巷！
                因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
                乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！</Text>
            </ScrollView>
          </View>

          <View style={{position: 'absolute', left: pxToDp(20), top: pxToDp(282)}}>
            <Text style={{color: '#fff'}}>外向</Text>
            <Text style={{color: '#fff'}}>80%</Text>
            <Text style={{color: '#fff'}}>判断</Text>
            <Text style={{color: '#fff'}}>85%</Text>
            <Text style={{color: '#fff'}}>抽象</Text>
            <Text style={{color: '#fff'}}>79%</Text>
          </View>

          <View style={{position: 'absolute', right: pxToDp(20), top: pxToDp(290)}}>
            <Text style={{color: '#fff'}}>理性</Text>
            <Text style={{color: '#fff'}}>85%</Text>
          </View>

          <View style={{position: 'absolute', top: pxToDp(460), width: '96%', alignSelf: 'center'}}>
            <Text style={{color: '#fff', marginBottom: pxToDp(5)}}>与你相似</Text>
            <ScrollView horizontal={true} style={{width: '100%'}}>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list1.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list2.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list3.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list4.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list5.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list6.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list7.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list8.jpg'}} style={{
                width: pxToDp(50),
                height: pxToDp(50),
                borderRadius: pxToDp(25),
                marginRight: pxToDp(10)
              }}/>
            </ScrollView>
          </View>

          <View style={{position: 'absolute', bottom: pxToDp(80), alignSelf: 'center',width: '60%',}}>
            <ThButton style={{
              height: pxToDp(40), width: '100%', overflow: 'hidden',
              borderRadius: pxToDp(10),
            }} onPress={()=>this.props.navigation.push('testSoul')}>继续测试</ThButton>
          </View>

        </ImageBackground>
      </View>
    );
  }
}

let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;

const styles = StyleSheet.create({
  bg: {
    width: screenW,
    height: screenH,
    position: 'relative',
  },

  scrollTextBox: {
    height: pxToDp(220),
    width: pxToDp(190),
    overflow: 'hidden',
    position: 'absolute',
    right: pxToDp(10),
    top: pxToDp(40),
  },
  nameBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: pxToDp(20),
  }
});

export default TestResult;